<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
    <link href="../css/css.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="info" id="box">
    <div id="container"></div>
    <div class="button">
        <button id="startButton">开始测试</button>
        <button id="finishButton">结束测试</button>
    </div>
    <div id="error">

    </div>
</div>

<!--
<div id="googlemap"></div>
-->

<!--设置高德地图-->
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=493751526c82bd17c10a879b94ecd428"></script>
<script>
    let satellite = new AMap.TileLayer.Satellite({
        detectRetina: true
    });
    let roadNet = new AMap.TileLayer.RoadNet();

    let map = new AMap.Map('container', {
        center: [121.212416, 31.287752],
        zooms: [3, 20],
        expandZoomRange: true,
        zoom: 17,
        layers: [
            // satellite,
            // roadNet
        ]
    });
    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.MapType',
        'AMap.Geolocation',
    ], function(){
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar());

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale());

        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        map.addControl(new AMap.MapType());

        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(new AMap.Geolocation());
    });

    let markerBlue = new AMap.Marker({
        icon: "../poi03/poi-blue.png",
        position: [121.213698, 31.287669],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        offset: new AMap.Pixel(-12, -32)
    });
    map.add(markerBlue);
    // markerBlue.hide();

    let markerRed = new AMap.Marker({
        icon: "../poi03/poi-red.png",
        position: [121.213698, 31.287669],
        offset: new AMap.Pixel(-12, -32)
    });
    // map.add(markerRed);
    // markerRed.hide();

    let markerYellow = new AMap.Marker({
        icon: "../poi03/poi-yellow.png",
        position: [121.213698, 31.287669],
        offset: new AMap.Pixel(-12, -32)
    });
     map.add(markerYellow);

    let markerGreen = new AMap.Marker({
        icon: "../poi03/poi-green.png",
        position: [121.213698, 31.287669],
        offset: new AMap.Pixel(-12, -32)
    });
    map.add(markerGreen);

    let markerPurple = new AMap.Marker({
        icon: "../poi03/poi-purple.png",
        position: [121.213698, 31.287669],
        offset: new AMap.Pixel(-12, -32)
    });
    // map.add(markerPurple);

</script>

<!--
<script src="../js/googlemap.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCwjGT--G3CT-uc3QRWfvoobVy6IImoY64&callback=initMap"
        type="text/javascript">
</script>
-->

<script src="../js/echarts.min.js"></script>
<script src="../js/websocket.js"></script>

<script>
    //折线图绘制
    let myChart = echarts.init(document.getElementById('error'));
    //一直显示loading
    // myChart.showLoading({
    //     text: 'Loding...'
    // });
    //隐藏loading
    // myChart.hideLoading();
    // xData = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
    xData = [];
    // yData = [5, 20, 36, 10, 10, 20];
    yData = [];
    let option = {
        title: {
            left: 'center',
            text: '实时误差曲线'
        },
        tooltip: {
            trigger: 'axis',
        },
        //保存为图片
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        //设置图例
        // legend: {
        //     data:['误差']
        // },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '50%'],
        },
        series: [{
            name: '误差',
            type: 'line',
            areaStyle: {
                normal: {}
            },
            data: yData,
        }]
    };
    myChart.setOption(option);

    //往曲线中添加数据
    function addData(y) {
        yData.push(y);
        yData.shift();
    }

    //初始化曲线，往曲线中添加100条数据
    for (let i = 1; i < 100; i++) {
        xData.push(i);
        yData.push(0);
    }
    updateErrorCurve(0);

    function updateErrorCurve(y) {
        addData(y);
        myChart.setOption({
            series: [{
                // name:'成交',
                data: yData
            }]
        });
    }
</script>
</body>
</html>